<template>
  <div class="nav-preview-wrapper">
    <div class="nav-grid">
      <div v-for="(item, index) in config.data" :key="index" class="nav-item">
        <el-image :src="item.image" class="nav-icon">
          <div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
        </el-image>
        <span class="nav-name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavPreview",
  props: ['config']
}
</script>

<style scoped>
.nav-preview-wrapper { padding: 10px 0; background-color: #fff; }
.nav-grid { display: flex; flex-wrap: wrap; text-align: center; }
.nav-item { width: 25%; padding: 10px 0; }
.nav-icon { width: 40px; height: 40px; margin-bottom: 5px; }
.nav-name { font-size: 12px; color: #666; }
</style>
